<template>
    <div class="box">
      <JsContentTitle
        :pageTitle="state.pageTitle"
        :buttonData="state.buttonData"
      ></JsContentTitle>
      <el-dialog v-model="dialogVisible" title="新增图书" style="width: 450px">
            <el-form :model="form">

                <el-form-item label="书名">
                    <el-input v-model="form.name" placeholder="请输入书名" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item label="作者">
                    <el-input v-model="form.author" placeholder="请输入作者" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item label="出版时间">
                    <el-date-picker v-model="form.year_publication" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input type="textarea" :rows="2" v-model="form.synopsis" placeholder="请输入"
                        style="width: 220px"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmAdd">确 定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 编辑 -->
        <el-dialog v-model="EditDialogVisible" title="编辑" style="width: 450px">
            <el-form :model="form">

                <el-form-item label="书名">
                    <el-input v-model="form.name" placeholder="请输入书名" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item label="作者">
                    <el-input v-model="form.author" placeholder="请输入作者" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item label="出版时间">
                    <el-date-picker v-model="form.year_publication" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input type="textarea" :rows="2" v-model="form.synopsis" placeholder="请输入"
                        style="width: 220px"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="EditDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
      <div class="contentView">
        <JsTable
          :toolBar="state.toolBar"
          :total="state.totalCount"
          :dataSource="state.dataSource"
          :columns="state.columns"
          :refresh="state.refresh"
          @search="searchEvent"
        >
        </JsTable>
      </div>
    </div>
  </template>
  <script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { getBookList, deleteBook,  addBook, editBook} from '@/api/xinrn'
  import { ElMessage } from 'element-plus';
  const dialogVisible = ref(false);
  const EditDialogVisible = ref(false);
  const form = ref({
    name: '',
    author: '',
    year_publication: "",
    synopsis: "",
    id: ""
  });

  onMounted(() => {
    state.value.refresh = 1//刷新列表执行searchEvent方法
  })

//搜索书籍
  const searchEvent = (params: any) => {
      //params包含page、pagesize、state.value.toolBar.form内容
    console.log(params)
    let config = {
      pageNum:params.page,
      pageSize:params.pageSize,
      bookName:params.bookname,
      author:params.author
    }
    getBookList(config).then((res:any) => {
      console.log("Received data:", res.data.data)
      state.value.dataSource = res.data.data
      state.value.totalCount = res.data.total
      state.value.refresh = 0 //重新置成0，否则下次刷新不执行
    })
  } 
// 新增书籍
  const handleAdd = () => {
      dialogVisible.value = true;
  };
  const confirmAdd = () => {
    let dataToSend = {
      name: form.value.name,
      author: form.value.author,
      year_publication: form.value.year_publication,
      synopsis: form.value.synopsis
   };
    addBook(dataToSend).then((response) => {
        ElMessage.success('图书添加成功！');
        state.dataSource.push(response.data); 
        dialogVisible.value = false; // 关闭弹窗
        searchEvent({ page: 1, pageSize: 10 }); //
    }).catch(error => {
        ElMessage.error('添加图书失败: ' + error.response.data.message);
        console.error('添加图书失败:', error.response.data);
    })
  }
//修改书籍信息
  const handleEdit = (row: any) => {
      form.value = row
      EditDialogVisible.value = true;
  };
  const confirmEdit = () => {
    let modifiedForm = {
        id: form.value.id,
        author: form.value.author,
        name: form.value.name,
        synopsis: form.value.synopsis,
        year_publication: form.value.year_publication
    }
    editBook(modifiedForm).then(() => {
        state.value.refresh = 1
        console.log('提交表单', form.value);
        ElMessage.success('图书修改成功！');
        EditDialogVisible.value = false; // 关闭弹窗
        form.value = {
            name: '',
            author: '',
            year_publication: "",
            synopsis: "",
        }
    })
  }
//删除书籍
  const deleteEvent = (row: any) => {
    console.log(row)
    deleteBook(row.id).then(() => {
        state.value.refresh = 1
    })
  }
//
  const state = ref({
    buttonData: [],
    refresh: 0,
    totalCount: 0,
    pageTitle: '图书管理',
    columns: {
      props: [
        {
          name: "书名",
          key: "name",
        },
        {
          name: '作者',
          key: 'author',
        },
        {
          name: '出版年份',
          key: 'year_publication',
        },
        {
          name: '简介',
          key: 'synopsis',
        },
      ],
      options: {
        width:'auto',
        btns: [
          {
            label: '编辑图书',
            key: 'edit',
            type: 'warning',
            event: handleEdit
          },
          {
            label: '下架图书',
            key: 'delete',
            type: 'warning',
            event: deleteEvent,
          },
        ],
      },
    },

    dataSource: [],
    toolBar: {
      form: {
        s1: '',
        s2: '',
        s3: '',
      },
      btns: [
        {
          label: '新增书籍',
          event: handleAdd,
        },
      ],
    },
  } as any)
  </script>
  
  <style lang="scss" scoped>
  *::-webkit-scrollbar {
    display: none;
    width: 10px;
  }
  .box {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    .contentView {
      background-color: white;
      border-radius: 5px;
      height: calc(100vh - 144px);
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  </style>
  